<template>
  <div class="template-manage-page">
    <!-- 搜索区域 -->
    <el-form inline :model="searchForm" class="search-form">
      <el-form-item label="模板名称：">
        <el-input v-model="searchForm.templateName" placeholder="请输入模板名称" />
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-date-picker
          v-model="searchForm.createTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary">搜索</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 新增按钮 -->
    <el-button type="primary" class="add-btn">新增</el-button>

    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" align="center" />
      <el-table-column prop="templateName" label="模板名称" />
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="'ON'"
            :inactive-value="'OFF'"
          />
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column label="操作" align="center">
        <template #default>
          <el-button type="text" class="text-btn edit-btn">编辑</el-button>
          <el-button type="text" class="text-btn delete-btn">删除</el-button>
          <el-button type="primary" size="mini">去编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TemplateManagement',
  data() {
    return {
      // 搜索表单数据
      searchForm: {
        templateName: '',
        createTime: [], // 日期范围选择器绑定一个数组
      },
      // 表格数据
      tableData: [
        {
          templateName: '南京邮电大学',
          status: 'ON',
          createTime: '2025-10-30',
        },
        {
          templateName: '第十届论坛',
          status: 'OFF',
          createTime: '2025-10-14',
        },
        {
          templateName: '学术会议通用模板',
          status: 'ON',
          createTime: '2025-09-20',
        },
      ],
      // 分页相关数据
      total: 3, // 总条数
      pageSize: 10, // 每页显示条数
    };
  },
  methods: {
    // 每页条数改变时触发
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      // 此处可以添加重新获取数据的逻辑
    },
    // 当前页改变时触发
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      // 此处可以添加重新获取数据的逻辑
    },
  },
};
</script>

<style scoped>
/* 页面整体样式 */
.template-manage-page {
  padding: 20px;
  background-color: #f9f9f9;
}

/* 搜索表单样式 */
.search-form {
  margin-bottom: 16px;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
}

/* 新增按钮样式 */
.add-btn {
  margin-bottom: 16px;
}

/* 操作列按钮样式 */
.text-btn {
  padding: 5px 10px;
  font-size: 12px;
}

.edit-btn {
  color: #409eff;
}

.delete-btn {
  color: #f56c6c;
}

/* 分页组件容器样式 */
.pagination-container {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}
</style>